<!DOCTYPE html>
<html lang="en">
<head>
	<#include "../static/top.ftl" >
    <link rel="stylesheet" href="/res/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/res/assets/css/jquery.webui-popover.min.css">
    <link rel="stylesheet" href="../../res/libs/misc/datatables/datatables.min.css">
    <link rel="stylesheet" href="../../res/assets/css/bootstrap-table.css">
</head>

<body class="menubar-left menubar-unfold menubar-light theme-primary">
<!--============= start main area -->

<!-- APP NAVBAR ==========-->



<#include "../static/header.ftl" >

<!--========== END app navbar -->

<!-- APP ASIDE ==========-->


<#include "../static/menu.ftl" >

<!--========== END app aside -->
<!-- navbar search -->

<!-- APP MAIN ==========-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加比较品牌</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>品类</label>
                        <select class="form-control">
                            <option>请选择品类...</option>
                            <option>品类1</option>
                            <option>品类2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>细分品类</label>
                        <select class="form-control">
                            <option>请选择细分品类...</option>
                            <option>细分品类1</option>
                            <option>细分品类2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>品牌</label>
                        <select class="form-control">
                            <option>请选择品牌...</option>
                            <option>品牌1</option>
                            <option>品牌2</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn" id="confirm_add"
                        style="background-color: #ba1b20;color: white;border-color: #ba1b20">
                    确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<main id="app-main" class="app-main">
    <div class="wrap">
        <section class="app-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">
                                <form class="form-inline" style="height:50px">
                                    <div class="form-group col-md-2">
                                        <div class="input-group date datepicker" id="start_datapicker"
                                             data-provide="datepicker"
                                             style="width: 90%;padding:0px">
                                            <input type="text" class="form-control" placeholder="起始时间" id="start_date"
                                                   style="min-width:140px">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <div class="input-group date datepicker" data-provide="datepicker"
                                             style="width: 90%;padding:0px">
                                            <input type="text" class="form-control" placeholder="结束时间" id="end_date"
                                                   style="min-width:140px">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <select class="form-control" id="province_select" style="min-width:140px;width: 100%">
                                            <option value="-1" selected>请选择省份</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <select class="form-control" id="city_select" style="min-width:140px;width: 100%" title="">
                                            <option value="-1" selected>请选择城市</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <select class="form-control" id="brand_select" style="min-width:140px;width: 100%">
                                            <option value="-1" selected>请选择品牌</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <button type="button" id="addBrand"
                                                class="btn rounded btn-default"
                                                style="background-color: #ba1b20;color: white;border-color: #ba1b20">
                                        <#--data-toggle="modal" data-target="#myModal">-->

                                            <i ass="fa fa-plus"></i> 确认
                                        </button>
                                    </div>
                                </form>
                            </h4>
                        </header><!-- .widget-header -->
                    <#--<hr class="widget-separator">-->
                        <div class="widget-body">
                            <div id="table_div"style="text-align:center">
                                <table data-detail-view="true" id="compareplatform1" >

                                </table>
                            </div>
                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div><!-- END column -->
            </div>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->
    <!-- APP FOOTER -->
    <div id="tableContent" hidden="hidden">
    <#--class="webui-popover top out"-->
        <table class="table"
        <tr>
            <td rowspan="4">
                <div class="widget-body" id="mapDiv" style="height:200px;width:200px;"></div>
            </td>
            <td colspan="3" id="pop_div_shop">肯德基万达店</td>
        </tr>
        <tr>
            <td colspan="3" id="pop_div_address">国兵路58号国兵路58号国兵路58号国兵路58号国兵路58号国兵路58号</td>
        </tr>
        <tr>
            <td>销售额</td>
            <td>客单数</td>
            <td>客单价</td>
        </tr>
        <tr>
            <td id="pop_div_sales">100</td>
            <td id="pop_div_gsn">80</td>
            <td id="pop_div_gsp">50</td>
        </tr>
        </table>
    </div>

<#include "../static/footer.ftl" >
    <script src="/res/assets/js/bootstrap-datepicker.js"></script>
    <script src="/res/assets/js/jquery.webui-popover.min.js"></script>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.0&key=9fa8c62b85a987698a515fbddee8efa7&&plugin=AMap.ToolBar"></script>
    <script type="text/javascript" src="../../res/assets/js/heatmap.js"></script>

</main>
<!--========== END app main -->
<script src="../../res/libs/misc/datatables/datatables.min.js"></script>
<script src="../../res/assets/js/bootstrap-table.js"></script>
<script>
    var count = 2;
    var sample = {
        "brand": {
            "gsn": 135,
            "avg_gsn": 135,
            "sales": 135,
            "avg_sales": 135,
            "gsp": 135,
            "shop_num": 135,
            "logo": "../assets/images/s5.jpg",
            "brand_id": "123",
            "brand_name": "brand_name"
        },
        "product_list": [
            {
                "type": "主食",
                "list": [
                    {
                        "pname": "产品1",
                        "logo": "../assets/images/p5.jpg",
                        "price": "18.8",
                        "sales": "3,000",
                        "pid": "123"
                    },
                    {
                        "pname": "产品2",
                        "logo": "../assets/images/p1.jpg",
                        "price": "18.8",
                        "sales": "3,000",
                        "pid": "123"
                    }
                ]
            },
            {
                "type": "小食",
                "list": [
                    {
                        "pname": "产品1",
                        "logo": "../assets/images/p5.jpg",
                        "price": "18.8",
                        "sales": "3,000",
                        "pid": "123"
                    },
                    {
                        "pname": "产品2",
                        "logo": "../assets/images/p1.jpg",
                        "price": "18.8",
                        "sales": "3,000",
                        "pid": "123"
                    }
                ]
            }
        ],
        "shop_list": [
            {
                "shop_name": "店铺1",
                "shop_id": "123",
                "sales": "30,000",
                "gsn": "300",
                "lng": 121.35,
                "lat": 31.23,
                "gsp": "300",
                "address": "店铺地址店铺地址店铺地址"
            },
            {
                "shop_name": "店铺2",
                "shop_id": "123",
                "sales": "30,000",
                "gsn": "300",
                "lng": 121.56,
                "lat": 31.23,
                "gsp": "300",
                "address": "店铺地址2店铺地址2店铺地址2"
            }
        ]
    };
    var map;
    //店铺品类销售汇总 排序
    //1.表头数据
    var titles = ['品类/产品','规格','价格(元)','Monthly Volume(元)','Monthly Value(元)','Menu Mix(%)','SR'];
    var current_col=2//当前排序列下标
    var current_desc={}//记录是否点了两下，当前是否降序
    //母表数据（ajax返回结果,需排序）
    var rowData=null;//格式：[['QSR','Total','1000','50'],[]]
    //子表数据（ajax返回结果,需排序）
    var subRowData=null;
    //省份-城市-品牌 下拉框数据
    var province_cities=null;
    var city_brands=null;

    $(document).ready(function () {
        //获取最新数据的月份
        getLatestMonth()
        //获取省份-城市-品牌 下拉框数据
        getRegionCityBrandName()
        var username = '${user_name}';
        $("#userName").html(username);
        $(".app-menu li").each(function () {
            $(this).removeAttr("class");
        });
        $(".app-menu li a").each(function () {
            $(this).removeAttr("style");
        });
        $("#menu_competitor").attr("class", "active");
        $("#menu_competitor a").attr("style", "color: #ba1b20");

        $("#nav_bar").append("<li>\n" +
                "                    <a class=\"page-title hidden-menubar-top hidden-float\" style='color: white'>/竞品追踪</a>\n" +
                "                </li>");

        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd'
        });
        $('#default-datatable').DataTable({
            //搜索框
            "searching": false,
            //是否排序
            "bSort": false,
            //是否显示每页显示数据大小
            "bLengthChange": false,
            //隐藏表格信息
            "bInfo": false

        });

        $('#default-datatable1').DataTable({
            //搜索框
            "searching": false,
            //是否排序
            "bSort": false,
            //是否显示每页显示数据大小
            "bLengthChange": false,
            //隐藏表格信息
            "bInfo": false

        });

        map = new AMap.Map('mapDiv', {
            resizeEnable: true,
            zoom: 15,
            center: [121.452, 31.225]
        });

        var tableSettings = {
            content: $('#tableContent'),
            width: 500
        };
        var settings = {
            trigger: 'hover',
            width: 500,
            closeable: false,
            style: '',
            padding: true,
            cache: false
        };

        $('.hoverPlay').webuiPopover($.extend({}, settings, tableSettings));

        $("#confirm_add").click(function () {
            count = count + 1;

            var brandLogo = "<th style=\"text-align: center;\" prop=\"" + count + "\">\n" +
                    "                                            <div class=\"avatar avatar-md avatar-circle dropdown\">\n" +
                    "                                                <img class=\"img-responsive\"\n" +
                    "                                                     src=\"" + sample.brand.logo + "\"\n" +
                    "                                                     alt=\"avatar\">\n" +
                    "                                                <ul>\n" +
                    "                                                    <li class=\"dropdown\">\n" +
                    "                                                        <a href=\"javascript:void(0)\" class=\"dropdown-toggle usertitle\"\n" +
                    "                                                           data-toggle=\"dropdown\" aria-haspopup=\"true\"\n" +
                    "                                                           aria-expanded=\"false\" style=\"color: #ba1b20\">\n" +
                    "                                                            <small>" + sample.brand.brand_name + "</small>\n" +
                    "                                                            <span class=\"fa fa-cog\"></span>\n" +
                    "                                                        </a>\n" +
                    "                                                        <ul class=\"dropdown-menu animated flipInY\">\n" +
                    "                                                            <li>\n" +
                    "                                                                <a class=\"text-color remove_brand\" prop=\"" + count + "\">\n" +
                    "                                                                    <span class=\"m-r-xs\"><i\n" +
                    "                                                                            class=\"fa fa-minus-circle\"></i></span>\n" +
                    "                                                                    <span>移除品牌</span>\n" +
                    "                                                                </a>\n" +
                    "                                                            </li>\n" +
                    "                                                        </ul>\n" +
                    "                                                    </li>\n" +
                    "                                                </ul>\n" +
                    "                                            </div>\n" +
                    "                                        </th>";

            var brandInfo = "<td style=\"vertical-align: middle;\" prop=\"" + count + "\">\n" +
                    "                                            <table class=\"table sub_table\">\n" +
                    "                                                <tbody>\n" +
                    "                                                <tr>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">客单数</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">" + sample.brand.gsn + "</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">店均客单数</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">" + sample.brand.avg_gsn + "</td>\n" +
                    "                                                </tr>\n" +
                    "                                                <tr>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">销售额</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">" + sample.brand.sales + "</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">店均销售额</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">" + sample.brand.avg_sales + "</td>\n" +
                    "                                                </tr>\n" +
                    "                                                <tr>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">客单价</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">" + sample.brand.gsp + "</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">店铺数</td>\n" +
                    "                                                    <td style=\"vertical-align: middle;\">" + sample.brand.shop_num + "</td>\n" +
                    "                                                </tr>\n" +
                    "                                                </tbody>\n" +
                    "                                            </table>\n" +
                    "                                        </td>";

            var productList = "<td prop=\"" + count + "\">\n" +
                    "                                            <table class=\"table sub_table\">\n" +
                    "                                                <tbody>\n" +
                    "                                                <tr>\n" +
                    "                                                    <th>类型</th>\n" +
                    "                                                    <th>产品名</th>\n" +
                    "                                                    <th>图片</th>\n" +
                    "                                                    <th>价格</th>\n" +
                    "                                                    <th>销售额</th>\n" +
                    "                                                </tr>";
            for (var i = 0; i < sample.product_list.length; i++) {
                var tmp = sample.product_list[i].list;
                for (var j = 0; j < tmp.length; j++) {
                    var infoTmp = "";
                    if (j !== 0) {
                        infoTmp = "<tr>\n";
                    } else {
                        infoTmp = "<tr>\n<td rowspan=\"" + tmp.length + "\">" + sample.product_list[i].type + "</td>\n";
                    }
                    infoTmp = infoTmp + "<td>" + tmp[j].pname + "</td>\n" +
                            "                                                    <td>\n" +
                            "                                                        <img class=\"img-responsive\"\n" +
                            "                                                             src=\"" + tmp[j].logo + "\"\n" +
                            "                                                             alt=\"avatar\" style=\"height: 50px\">\n" +
                            "                                                    </td>\n" +
                            "                                                    <td>" + tmp[j].price + "</td>\n" +
                            "                                                    <td>" + tmp[j].sales + "</td>\n" +
                            "                                                </tr>";
                    productList = productList + infoTmp;
                }
            }
            productList = productList + "</tbody></table></td>";

            var shopList = "<td prop=\"" + count + "\">\n" +
                    "                                            <table class=\"table sub_table\">\n" +
                    "                                                <tr>\n" +
                    "                                                    <th>店铺名</th>\n" +
                    "                                                    <th>销售额</th>\n" +
                    "                                                    <th>客单数</th>\n" +
                    "                                                </tr>";
            for (var si = 0; si < sample.shop_list.length; si++) {
                shopList = shopList + "<tr>\n" +
                        "                                                    <td class=\"hoverPlay\" onmouseover=\"shopInfo("
                        + sample.shop_list[si].lng + "," + sample.shop_list[si].lat
                        + ",'" + sample.shop_list[si].shop_name + "','" + sample.shop_list[si].address
                        + "','" + sample.shop_list[si].gsn + "','" + sample.shop_list[si].gsp + "','"
                        + sample.shop_list[si].sales + "');\">"
                        + sample.shop_list[si].shop_name + "\n" +
                        "                                                    </td>\n" +
                        "                                                    <td>" + sample.shop_list[si].sales + "</td>\n" +
                        "                                                    <td>" + sample.shop_list[si].gsn + "</td>\n" +
                        "                                                </tr>"

            }
            shopList = shopList + "</table></td>";

            $("#tr_logo").append(brandLogo);
            $("#tr_brand").append(brandInfo);
            $("#tr_product").append(productList);
            $("#tr_shop").append(shopList);

            $("th").css("border-top-style", "none");
            $(".sub_table").css("background-color", "white");
            $('.hoverPlay').webuiPopover('destroy').webuiPopover($.extend({}, settings, tableSettings));
            $(".remove_brand").each(function (index, el) {
                var nowIndex = $(this).attr("prop");
                console.log("===" + nowIndex);
                $(this).on("click", function () {
                    $("th").each(function () {
                        if ($(this).attr("prop") == nowIndex) {
                            $(this).remove();
                        }
                    });
                    $("td").each(function () {
                        if ($(this).attr("prop") == nowIndex) {
                            $(this).remove();
                        }
                    });
                })
            });
        });
        buildTable("上海", 201801, 201804,'肯德基');
        $("#addBrand").click(function (){
            var  start=$("#start_date").val()
            var  end=$("#end_date").val()
            var  city=$("#city_select").val()
            var  brand=$("#brand_select").val()
            if(city==-1||brand==-1){
                alert("城市或品牌没选！！")
            }else {
                buildTable(city, start, end, brand);
            }
        });

    });

    //$("td").css("vertical-align", "middle");
    $("th").css("border-top-style", "none");
    $(".sub_table").css("background-color", "white");
    $(".remove_brand").each(function (index, el) {
        $(this).on("click", function () {
            $("th").each(function () {
                if ($(this).attr("prop") == index + 1) {
                    $(this).remove();
                }
            });
            $("td").each(function () {
                if ($(this).attr("prop") == index + 1) {
                    $(this).remove();
                }
            });
        })
    });
    //省份-城市-品牌  级联
    $("#province_select").change(function(){
        var html="<option value='-1'>请选择城市</option>"
        var defaultVal=-1
        for(key in window.province_cities){
            if($(this).val()==key){
                window.province_cities[key].forEach(function(value,index){
                    if(defaultVal=-1){
                        defaultVal=value
                    }
                    html=html+"<option value='"+value+"'>"+value+"</option>"
                });
                break;
            }
        }
        $("#city_select").empty()
        $("#city_select").append(html)
        //设置下级默认值
        if(defaultVal!=-1) {
            $("#city_select").val(defaultVal)
            var html="<option value='-1'>请选择品牌</option>"
            for(key in window.city_brands){
                if(defaultVal==key){
                    window.city_brands[key].forEach(function(value,index){
                        html=html+"<option value='"+value+"'>"+value+"</option>"
                    });
                    break;
                }
            }
            $("#brand_select").empty()
            $("#brand_select").append(html)
            $("#brand_select").val(window.city_brands[defaultVal][0])
        }

    })
    $("#city_select").change(function(){
        var city=$(this).val()
        $("#brand_select").empty()
        var html="<option value='-1'>请选择品牌</option>"
        for(key in window.city_brands){
            if(city==key){
                window.city_brands[key].forEach(function(value,index){
                    html=html+"<option value='"+value+"'>"+value+"</option>"
                });
                break;
            }
        }
        $("#brand_select").append(html)
        $("#brand_select").val(window.city_brands[city][0])
    })

    function shopInfo(lng, lat, shopName, address, gsn, gsp, sales) {
        //console.log($('#tableContent').html());
        map.clearMap();
        map.setZoomAndCenter(15, [lng, lat]);
        $("#tableContent").removeAttr("hidden");
        $("#pop_div_shop").html(shopName);
        $("#pop_div_address").html(address);
        $("#pop_div_sales").html(sales);
        $("#pop_div_gsn").html(gsn);
        $("#pop_div_gsp").html(gsp);

        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            position: [lng, lat],
            animation: 'AMAP_ANIMATION_DROP'
        });
        marker.setMap(map);
    }

    function expandTabbuildTablele(index,$detail, cells,subRow) {
        //子表排序
        var subRow=subTabSort(subRow)
        buildTable1(index,$detail, cells,subRow);
    }

    function buildTable(city_name,start_month,end_month,brand) {

        $.ajax({
            type: "GET",
            url: "/service/data/getComparisonbyProduct?city="
            + city_name + "&start_time="
            + start_month+ "&end_time="
            + end_month+ "&brand="
            + brand,
            async: false,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        rowData = res.data.cate;//格式：[['QSR','Total','1000','50'],[]]
                        subRowData=res.data.subCate
                        var sortData=parentTabSort(rowData,"价格(元)",1)
                        buildTableByAjaxData(sortData,subRowData)
                        //默认排序表头选中列样式
                        var cli=$("th[data-field=field"+current_col+"]");
                        cli.css({
                            "color":"#6a6c6f",
                        })
                    } catch (e) {
                        console.info(e);
                    }
                }
            }
        });
    }
    //根据列名对母表排序(desc:1,降序，0升序)
    function parentTabSort(rowData,sort_col_name,desc){
        //rowData;//格式：[['QSR','Total','1000','50'],[]]
        var rowData=rowData
        var idx=titles.indexOf(sort_col_name)
        if(idx==-1){
            alert("未找到要排序的列！  "+sort_col_name)
        }else{
            current_col=idx;
        }
        //暂时使用冒泡排序
        for(var rowi=0;rowi<rowData.length-1;rowi++){
            for(var rowj=rowi+1;rowj<rowData.length;rowj++){
                var sortNum1=rowData[rowi][current_col].replace(new RegExp(/(,)/g),"")
                sortNum1=(sortNum1-0)*1
                var sortNum2=rowData[rowj][current_col].replace(new RegExp(/(,)/g),"")
                sortNum2=(sortNum2-0)*1
                if(desc==1&&sortNum2 > sortNum1) {//降序
                    var temp = rowData[rowi];
                    rowData[rowi] = rowData[rowj]
                    rowData[rowj] = temp
                }
                if (desc==0&&sortNum2 < sortNum1) {//升序
                    var temp = rowData[rowi];
                    rowData[rowi] = rowData[rowj]
                    rowData[rowj] = temp
                }
            }
        }
        return rowData
    }
    //根据列名对子表排序（根据母表的当前升降序排序）
    function subTabSort(rowData){
        //rowData;//格式：[['QSR','Total','1000','50'],[]]
        var rowData=rowData
        //获取母表的当前升降序
        var desc=1
        for(var cur in window.current_desc){
            if(cur==window.titles[window.current_col]){
                desc=window.current_desc[cur]
            }
        }
        var current_col=window.current_col
        //暂时使用冒泡排序
        for(var rowi=0;rowi<rowData.length-1;rowi++){
            for(var rowj=rowi+1;rowj<rowData.length;rowj++){
                var sortNum1=rowData[rowi][current_col].replace(new RegExp(/(,)/g),"")
                sortNum1=(sortNum1-0)*1
                var sortNum2=rowData[rowj][current_col].replace(new RegExp(/(,)/g),"")
                sortNum2=(sortNum2-0)*1
                if(desc==1&&sortNum2 > sortNum1) {//降序
                    var temp = rowData[rowi];
                    rowData[rowi] = rowData[rowj]
                    rowData[rowj] = temp
                }
                if (desc==0&&sortNum2 < sortNum1) {//升序
                    var temp = rowData[rowi];
                    rowData[rowi] = rowData[rowj]
                    rowData[rowj] = temp
                }
            }
        }
        return rowData
    }
    //品牌销售情况(更新后)
    function buildTableByAjaxData(rowData,subRowData){
        var columns = []
        for(var i=0;i<titles.length;i++) {
            columns.push({
                field: 'field' + i,
                title: titles[i],
                sortable: false,
            });
        }
        //2.母表 数据
        var data = [];
        for (var i=0; i < rowData.length; i++) {
            row = {};
            for (var j=0; j < titles.length; j++) {
                row['field' + j] =rowData[i][j];
            }
            data.push(row);
        }

        var clear_table="<table data-detail-view=\"true\" id=\"compareplatform1\" ></table>"
        $("#table_div").empty()
        $("#table_div").append(clear_table)
        var $table = $('#compareplatform1');
        $table.bootstrapTable({
            columns: columns,
            data: data,
            detailView: titles.length > 1,
            onExpandRow: function (index, row, $detail) {
                //设置品类行背景高亮
                var detail_tr=$detail.parent()
                var parent_tr=detail_tr.prev()
                parent_tr.css({
                    "background":"#fff3f5"
                })
                var cate_name = row['field0']
                //子表 数据
                var subRow = subRowData[cate_name]
                expandTable(index,$detail, titles.length+1, subRow);
                //设置表格的列 无边框
                initTableStyleCategory();
            },
            onCollapseRow: function (index, row) {
                //设置品类行背景高亮
                var detail_tr=$(".detail_"+index)
                var parent_tr=detail_tr.prev().prev()
                parent_tr.css({
                    "background":"#ffffff"
                })
                $(".detail_"+index).remove()
            },
        });
        //表头居中
        $("div.th-inner ").css({
            "text-align": "center",
            "cursor":"pointer"
        })
        $("#compareplatform1 tbody tr td:nth-child(2) ").css({
            'color':'#cf3138',
            'font-weight':'bold'
        })
        //查看过去十二个月的趋势
        // for(var i=0;i<data.length;i++) {
        //     var cate_td=$("#compareplatform1 tbody tr[data-index='"+i+"'] td:nth-child(2)")
        //     var td_html=getTooltipHtml("1_"+cate_td.text())//加入Tooltip 浮窗
        //     cate_td.empty()
        //     cate_td.append(td_html)
        //     var sub_cate_td=$("#compareplatform1 tbody tr[data-index='"+i+"'] td:nth-child(3)")
        //     var td_html2=getTooltipHtml("2_"+sub_cate_td.text())
        //     sub_cate_td.empty()
        //     sub_cate_td.append(td_html2)
        // }
        // $(".cate_tooltip").tooltip();
        //设置表格的列 无边框
        initTableStyleCategory();
        //点击表头排序，更新表格
        $(".th-inner ").on("click",function(){
            var title = $(this).text()
            var idx=titles.indexOf(title)
            if(idx!=0&&idx!=1) {//1,2列不排序
                //其他col标志清零
                for (var key in current_desc) {
                    if (title != key) {
                        current_desc[key] = 0
                    }
                }
                if (current_desc[title] == null || current_desc[title] == 0) {//当前升序
                    current_desc[title] = 1
                } else {
                    current_desc[title] = 0
                }
                var sortData = parentTabSort(window.rowData, title, current_desc[title])
                buildTableByAjaxData(sortData, window.subRowData)
                //排序表头选中列样式
                var cli=$("th[data-field=field"+idx+"]");
                cli.css({
                    "color":"#6a6c6f",
                })
            }
        })
    }
    function buildTable1(index,$el, cells,rowData2) {
        cells=cells-1
        var i, j, row,
                columns = [],
                data = [];

        for (i = 0; i < cells; i++) {
            columns.push({
                field: 'field' + i,
                //title: title2[i],
                sortable: false
            });
        }

        for (i = 0; i < rowData2.length; i++) {
            row = {};
            for (j = 0; j < cells; j++) {
                row['field' + j] = rowData2[i][j];
            }
            data.push(row);
        }
        //修改为与母表对齐
        var detail_tr=$el.parent()
        detail_tr.empty()
        var rows=""
        for(var k=0;k<data.length;k++){//一个数据一行
            var row="<tr class='detail_"+index+"'><td style></td>"
            var first_run=true
            for(var key in data[k]){
                if(first_run) {//加入Tooltip 浮窗
                    // row=row+"<td style>"+getTooltipHtml("3_"+data[k][key])+"</td>"
                    row=row+"<td style='color:#cf3138;font-weight:bold;'>"+data[k][key]+"</td>"
                    first_run=false
                }else {
                    row = row + "<td style>" + data[k][key] + "</td>"
                }
            }
            rows=rows+row+"</tr>"
        }
        detail_tr.after(rows)
    }
    function getTooltipHtml(args){
        if(args.split("_")[0]==1||args.split("_")[0]==2) {
            var html = "<a href=\"javascript:void(0)\" class=\"cate_tooltip\" style='color:#cf3138;font-weight:bold;'" +
                    "data-toggle=\"tooltip\" " +
                    "title=\"点击查看过去十二个月的趋势\" " +
                    "onclick='showLastData(\"" + args + "\")'>" + args.split("_")[1] + "</a>"
            return html
        }else{
            var html = "<a href=\"javascript:void(0)\" class=\"cate_tooltip\" style='font-weight:bold;color:#6a6c6f'" +
                    "data-toggle=\"tooltip\" " +
                    "title=\"点击查看过去十二个月的趋势\" " +
                    "onclick='showLastData(\"" + args + "\")'>" + args.split("_")[1] + "</a>"
            return html
        }
    }
    //设置表格的列 无边框initTableStyle
    function initTableStyleCategory(){
        $('#compareplatform1 thead').css({
            //"background":"#ba1b20",
            //"color":"#ffffff"
            "border-bottom": "3px solid #ba1b20"
        })
        $('#compareplatform1').css({
            "border-left":"none",
            "border-right":"none"
        });
        $('#compareplatform1 tr td').css({
            "border-left":"none",
            "border-right":"none"
        });
        $('#compareplatform1 tr th').css({
            "border-left":"none",
            "border-right":"none"
        });
    }
    function expandTable(index,$detail, cells,subRow) {
        //子表排序
        var subRow=subTabSort(subRow)
        buildTable1(index,$detail, cells,subRow);
    }
    //获取最新数据的月份
    function getLatestMonth() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm',
            startView: 1,
            todayHighlight: true,
            maxViewMode: 'years',
            minViewMode: 'months',
            endDate: new Date().Format('yyyyMM')
        });

        $.ajax({
            type: "GET",
            url: "/service/view/get_latest_month",
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        defaultMonth = res.data.yearMonth.toString().substring(0, 4)
                                + "-" + res.data.yearMonth.toString().substring(4, 6);
                        $('.datepicker').datepicker('update', defaultMonth);
                        $("#start_datapicker").datepicker('update', res.data.yearMonth.toString().substring(0, 4) + "-01");
                    } catch (e) {
                    }

                }
            }
        });
    }
    //获取省份-城市-品牌 下拉框数据
    function getRegionCityBrandName() {
        $.ajax({
            type: "GET",
            url: "/service/data/getRegionCityBrandName",
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        // console.info("--------cities------->>>>>>>>>"+JSON.stringify(res.data.cities))
                        // console.info("---------brands----->>>>>>>>>"+JSON.stringify(res.data.brands))
                        province_cities=res.data.cities;
                        city_brands=res.data.brands;
                        var defaultProvince="上海"
                        var defaultCity="上海"
                        var defaultBrand="肯德基"
                        // for(key in province_cities){
                        //     defaultProvince=key;
                        //     defaultCity=province_cities[key][0]
                        //     for(key in city_brands){
                        //         if(city_brands[key]==defaultCity){
                        //             defaultBrand=city_brands[key][0]
                        //             break;
                        //         }
                        //     }
                        //     break;
                        // }
                        var province_html="<option value='-1'>请选择省份</option>"
                        var city_html="<option value='-1'>请选择城市</option>"
                        var brand_html="<option value='-1'>请选择品牌</option>"
                        for(key in province_cities){
                            province_html=province_html+"<option value='"+key+"'>"+key+"</option>"
                            if(key==defaultProvince){
                                province_cities[key].forEach(function(value,index){
                                    city_html=city_html+"<option value='"+value+"'>"+value+"</option>"
                                })
                            }
                        }
                        for(key in city_brands){
                            if(key==defaultCity){
                                city_brands[key].forEach(function(value,index){
                                    brand_html=brand_html+"<option value='"+value+"'>"+value+"</option>"
                                })
                                break;
                            }
                        }
                        $("#province_select").empty()
                        $("#city_select").empty()
                        $("#brand_select").empty()

                        $("#province_select").append(province_html)
                        $("#city_select").append(city_html)
                        $("#brand_select").append(brand_html)

                        $("#province_select").val(defaultProvince)
                        $("#city_select").val(defaultCity)
                        $("#brand_select").val(defaultBrand)

                    } catch (e) {
                    }
                }
            }
        });
    }
</script>

</body>

</html>